<template>
    <div class="wrapper" :style="{height:clientHeight}">
        <el-container class="page">
            <el-header class="page-main-head">
                    <v-head></v-head>
                </el-header>
            <el-container>
                <el-aside class="page-side" width="250px">
                <v-sidebar></v-sidebar>
                </el-aside>
                <el-container>
                    <el-main class="page-main-content">
                    <router-view></router-view>
                    </el-main>
                    <!-- <el-footer>Footer</el-footer> -->
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
export default {
    data(){
        return {
                tagsList: [],
                collapse: false,
                clientHeight:0
        }
    },
    components:{
        vHead, vSidebar
    },
    created(){
        let self = this;
        self.clientHeight = document.documentElement.clientHeight;
    }
}
</script>
<style>
.wrapper .page{
    height:100%;
}
.wrapper .page-main-head{
    background: #fff;
}
.wrapper .page-main-content{
    background: #f1f1f1;
}
</style>


